import React from 'react';
import {
  Box, Paper, Typography, TextField, Checkbox, FormControlLabel,
  Button, Grid, Divider, LinearProgress, FormControl, InputLabel,
  Select, MenuItem, Tab, Tabs, Chip
} from '@mui/material';
import InsertLinkIcon from '@mui/icons-material/InsertLink';
import PieChartIcon from '@mui/icons-material/PieChart';
import BarChartIcon from '@mui/icons-material/BarChart';
import CloudIcon from '@mui/icons-material/Cloud';

const SurveyPage: React.FC = () => {
  const [chartTab, setChartTab] = React.useState(0);
  const handleTabChange = (_: any, newValue: number) => {
    setChartTab(newValue);
  };

  return (
    <Box sx={{ backgroundColor: '#0d1b2a', color: '#fff', minHeight: '100vh', p: 4 }}>
      <Grid container spacing={3}>
        {/* 问卷编辑器 */}
        <Grid item xs={12} md={4}>
          <Paper sx={{ p: 3, backgroundColor: '#1b263b', color: '#fff' }}>
            <Typography variant="h6" gutterBottom>📝 问卷编辑器</Typography>
            <Box sx={{ mb: 2 }}>
              <Button size="small" variant="outlined" sx={{ mr: 1 }}>A</Button>
              <Button size="small" variant="outlined" sx={{ mr: 1 }}>🗂️</Button>
              <Button size="small" variant="outlined" sx={{ mr: 1 }}>✓</Button>
              <Button size="small" variant="outlined">👁️</Button>
            </Box>

            <Box sx={{ mb: 2 }}>
              <Button size="small" variant="contained" sx={{ mr: 1 }}>单选题</Button>
              <Button size="small" variant="contained" sx={{ mr: 1 }}>多选题</Button>
              <Button size="small" variant="contained">文本题</Button>
            </Box>

            <TextField fullWidth label="题目内容" variant="outlined" margin="normal"
              defaultValue="您认为贵部门的数字化转型程度如何？"
              InputLabelProps={{ style: { color: '#ccc' } }}
              sx={{ input: { color: '#fff' } }}
            />

            {['非常好', '比较好', '一般', '有待提高'].map((option, idx) => (
              <TextField
                key={idx}
                fullWidth
                variant="outlined"
                margin="dense"
                defaultValue={option}
                sx={{ input: { color: '#fff' } }}
              />
            ))}

            <Box sx={{ mt: 2 }}>
              <FormControlLabel control={<Checkbox defaultChecked />} label="必填" />
              <FormControlLabel control={<Checkbox />} label="逻辑跳转" />
            </Box>

            <Box mt={2} fontSize={14}>
              ✅ 所见即所得编辑器，支持拖拽添加题目 <br />
              ✅ 支持单选、多选、文本题等多种题型 <br />
              ✅ 实现个性化问卷流程
            </Box>
          </Paper>
        </Grid>

        {/* 问卷分发 */}
        <Grid item xs={12} md={4}>
          <Paper sx={{ p: 3, backgroundColor: '#1b263b', color: '#fff' }}>
            <Typography variant="h6" gutterBottom>📤 问卷分发</Typography>

            <Tabs value={0} textColor="inherit" indicatorColor="primary">
              <Tab label="链接分享" />
              <Tab label="邮件分发" />
              <Tab label="短信分发" />
              <Tab label="内部通知" />
            </Tabs>

            <Box mt={2}>
              <Typography variant="body2" gutterBottom>问卷链接</Typography>
              <TextField fullWidth variant="outlined" value="https://survey.example.com/s/a8f2..." InputProps={{
                endAdornment: <InsertLinkIcon sx={{ color: '#aaa' }} />
              }} sx={{ input: { color: '#fff' } }} />
            </Box>

            <Box mt={2}>
              <Typography variant="body2">有效期设置</Typography>
              <Grid container spacing={1}>
                <Grid item xs={6}>
                  <TextField fullWidth label="开始日期" type="date" defaultValue="2025-06-01" InputLabelProps={{ shrink: true }} />
                </Grid>
                <Grid item xs={6}>
                  <TextField fullWidth label="结束日期" type="date" defaultValue="2025-06-30" InputLabelProps={{ shrink: true }} />
                </Grid>
              </Grid>
            </Box>

            <Box mt={2}>
              <Typography>分发状态跟踪</Typography>
              <Typography variant="body2">已发送：42</Typography>
              <Typography variant="body2">已打开：35</Typography>
              <Typography variant="body2">已完成：28</Typography>
            </Box>

            <Button variant="contained" fullWidth sx={{ mt: 2 }}>发送问卷</Button>

            <Box mt={2} fontSize={14}>
              ✅ 多种分发方式：链接、邮件、短信、通知 <br />
              ✅ 实时状态跟踪，掌握完成情况 <br />
              ✅ 有效期与权限精细控制
            </Box>
          </Paper>
        </Grid>

        {/* 问卷回收与分析 */}
        <Grid item xs={12} md={4}>
          <Paper sx={{ p: 3, backgroundColor: '#1b263b', color: '#fff' }}>
            <Typography variant="h6" gutterBottom>📊 问卷回收与可视化分析</Typography>

            <Tabs value={chartTab} onChange={handleTabChange} textColor="inherit" indicatorColor="primary" sx={{ mb: 2 }}>
              <Tab label="数据汇总" />
              <Tab label="图表分析" />
              <Tab label="交叉分析" />
              <Tab label="导出报告" />
            </Tabs>

            <Typography variant="body2" gutterBottom>
              问题1：您认为贵部门的数字化转型程度如何？
            </Typography>

            {[
              { label: '非常好', value: 20 },
              { label: '比较好', value: 35 },
              { label: '一般', value: 30 },
              { label: '有待提高', value: 15 },
            ].map((item, idx) => (
              <Box key={idx} mb={1}>
                <Typography variant="body2">{item.label}</Typography>
                <LinearProgress variant="determinate" value={item.value} sx={{ height: 10, borderRadius: 5 }} />
              </Box>
            ))}

            <Box display="flex" gap={1} mt={2}>
              <Chip icon={<PieChartIcon />} label="饼图" />
              <Chip icon={<BarChartIcon />} label="柱状图" />
              <Chip icon={<CloudIcon />} label="词云" />
            </Box>

            <Button variant="contained" fullWidth sx={{ mt: 2 }}>导出分析报告</Button>

            <Box mt={2} fontSize={14}>
              ✅ 自动统计各题型数据，生成图表 <br />
              ✅ 支持多种图表形式 <br />
              ✅ 支持PDF报告导出
            </Box>
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
};

export default SurveyPage;
